<template>
  <van-popup v-model:show="innerVisible" round position="bottom">
    <div class="agreement-wrapper pt-15 px-20 bg-white relative text-333333">
      <svg-icon
        name="icon-shanchuxian"
        :size="14"
        color="#333"
        class="absolute right-15 top-15"
        @click="close"
      />
      <div class="text-16 font-bold text-center">
        {{ agreementInfoData.name }}
      </div>
      <div
        class="h-[60vh] min-h-200 overflow-y-auto whitespace-pre-wrap mt-15 pb-15 text-14"
        v-html="agreementInfoData.content"
      />
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { AgreementInfoData, getAgreement } from "@/api/AgreementPopup";
defineOptions({
  name: "AgreementPopup"
});
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  agreementType: {
    type: Number,
    default: 1,
    required: true
  }
});

const emit = defineEmits(["update:visible"]);

// 使用内部变量避免直接修改 prop
const innerVisible = ref(props.visible);

// 监听外部 show 变化
watch(
  () => props.visible,
  val => {
    innerVisible.value = val;
  }
);

// 监听内部变化并通知父组件
watch(innerVisible, val => {
  emit("update:visible", val);
});

const close = () => {
  innerVisible.value = false;
};
// 数字人列表
const agreementInfoData = ref<AgreementInfoData>({
  content: "",
  name: "",
  type: 0,
  typeName: ""
});
// 分类请求接口
const getAgreementPort = async (type: number) => {
  agreementInfoData.value = await getAgreement(type);
};
onMounted(() => {
  getAgreementPort(props.agreementType);
});
</script>

<style scoped lang="less">
.agreement-wrapper {
  background-image: linear-gradient(180deg, #d5daff 0%, #ffffff 16%);
  background-size: 100% 1300rpx;
  background-repeat: no-repeat;
  border-radius: 24rpx 24rpx 0 0;
}
</style>
